<script>
import { ElMessageBox } from 'element-plus';
import SideMenu from './components/SideMenu.vue';
import Header from './components/Header.vue';

export default {
  components: {
    SideMenu,
    Header
  },
  data() {
    return {
      title: 'MORDENSKY',
      username: 'admin',
      isCollapse: false,
      role: sessionStorage.getItem('role') || ''
    }
  },
  mounted() {
    // console.log('当前角色', this.role);
    // console.log(this.$route.path);
    this.username = sessionStorage.getItem('username') || 'admin';
    // 如果未登录则重定向到登录页
    if (!sessionStorage.getItem('username')) {
      this.$router.push('/login');
    } else {
      // 如果直接访问/index路径，根据用户角色重定向到对应默认页面
      if (this.$route.path === '/index/dashboard') {
        const defaultPaths = {
          '公司运营': '/index/dashboard',
          '经纪人管理员': '/index/AgentManagement',
          '经纪人': '/index/artistManagement',
          '艺人': '/index/artistPersonal',
          '场地管理员': '/index/VenueManagement/VenueInformationOverview',
          '系统管理员': '/index/SystemManagement'
        };
        const defaultPath = defaultPaths[this.role] || '/index/dashboard';
        // console.log(defaultPath);
        this.$router.push(defaultPath);
      }
      // 路由守卫
      // this.checkPermission(this.$route.path);
    }
    // this.$router.beforeEach((to, from, next) => {
    //   this.checkPermission(to.path);
    //   next();
    // });
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    handleLogout() {
      ElMessageBox.confirm(
      '您正在执行登出操作，是否退出登录？',
      '退出登录',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }
      ).then(() => {
        // 这里执行退出登录逻辑
        // 1. 清除token
        localStorage.removeItem('token')
        // 2. 跳转到登录页
        this.$router.push('/login')
      }).catch(() => {})
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleBreadcrumbClick(item, index) {
      this.$emit('breadcrumb-click', item, index);
    },
    checkPermission(path) {
      const role = this.role;
      const permissions = {
        '公司运营': ['/index/dashboard', '/index/artistManagement', '/login', '/regist'],
        '经纪人管理员': ['/index/AgentManagement', '/index/AgentPersonal', '/login', '/regist'],
        '经纪人': ['/index/artistManagement', '/index/AgentArtistPersonal', '/index/VenueManagement/VenueRepairReport', '/index/VenueManagement/VenueReservation', '/login', '/regist'],
        '艺人': ['/index/artistPersonal', '/login', '/regist'],
        '场地管理员': ['/index/VenueManagement/VenueInformationOverview', '/index/VenueManagement/VenueRepairReportOverview', '/index/VenueManagement/VenueReservationOverview', '/login', '/regist'],
        '系统管理员': ['/*']
      };

      const allowedPaths = permissions[role] || [];
      if (allowedPaths.includes('/*') || allowedPaths.some(p => path.startsWith(p))) {
        return true;
      } else {
        ElMessageBox.alert('您没有权限访问此页面', '权限不足', {
          confirmButtonText: '确定',
          type: 'warning',
        }).then(() => {
          this.$router.push('/index/dashboard');
        });
        return false;
      }
    }
  }
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 使用SideMenu组件 -->
      <SideMenu 
        :isCollapse="isCollapse" 
        :title="title"
        @open="handleOpen"
        @close="handleClose"
      />
      
      <el-container direction="vertical">
        <!-- 使用Header组件 -->
        <Header
          :isCollapse="isCollapse"
          :username="username"
          @toggle-collapse="toggleCollapse"
          @logout="handleLogout"
        />
        <el-main><router-view></router-view></el-main>
      </el-container>
    
    </el-container>
  </div>
</template>
 

<style scoped>
  .common-layout {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }

  .el-container {
    height: 100%;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    height: calc(100vh - 60px); /* 减去header高度 */
    overflow-y: auto;
    padding: 20px;
  }
</style>